<!DOCTYPE html>
<html lang="zh">
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/header :: header(~{::title},~{::link},~{})">
    <title>临窗旋墨-文章归档</title>
    <link rel="stylesheet" th:href="@{/css/jianshu.css}"/>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" th:href="@{/css/timeLine.css}">
</head>
<body class="body">
<!--导航-->
<div th:replace="common/nav :: nav(true)"></div>
<div class="container-fluid">
    <div class="row">
        <div style="margin-top: 20px;"></div>
        <div class="col-lg-2  col-sm-2 col-md-2">

        </div>
        <div class="col-lg-7  col-sm-67 col-md-7">


            <!--时间轴 start-->
            <ul class="time-line">
                <div th:remove="tag" th:each="data:${pager.datas}">
                    <li class="tl-header">
                        <h2 th:text="${data.date}">2020年01月</h2>
                    </li>
                    <ul class="tl-body" th:each="detail: ${data.details}">
                        <li>
                            <span th:text="${detail.day}+'日'">11日</span>
                            <h3>
                                <a target="_blank" th:href="@{'/detail/' + ${detail.id}}" th:text="${detail.title}">文章标题</a>
                            </h3>
                        </li>
                    </ul>
                </div>


                <li class="tl-header start">
                    <h2><i class="fa fa-calendar  fa-3x"></i></h2>
                </li>
            </ul>

            <!--时间轴end-->
            <!--页码相关-->
            <div th:replace="common/pager :: pager"></div>
        </div>
        <div th:replace="common/right :: right"></div>

    </div>
</div>
<!-- 引入通用js-->
<div th:replace="common/footer :: footer"></div>
<script>
    $(function () {
    });

</script>
</body>
</html>
